<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
	</head>
	<body>
		<div id="app" align="center">
			<h1>用户新增</h1>
			<div>
				名称<input type="text" v-model="addUser.name"/>
				年龄<input type="text" v-model="addUser.age"/>
				性别<input type="text" v-model="addUser.sex"/>
				<button @click="addUserBtn">新增</button>
			</div>
			<br>
			<hr>
			<br>
			<h1>用户修改</h1>
			<div>
				编号<input type="text" v-model="updateUser.id" disabled/>
				名称<input type="text" v-model="updateUser.name"/>
				年龄<input type="text" v-model="updateUser.age"/>
				性别<input type="text" v-model="updateUser.sex"/>
				<button @click="updateUserBtn">修改</button>
			</div>
			<br>
			<hr>
			<br>
			<h1>用户查找</h1>
			<div>
				编号<input type="text" v-model="selectUser.id" />
				名称<input type="text" v-model="selectUser.name"/>
				年龄<input type="text" v-model="selectUser.age"/>
				性别<input type="text" v-model="selectUser.sex"/>
				<button @click="selectUserBtn">查询</button>
			</div>
			<br>
			<hr>
			<br>
			<table id="tab1" border="1px" width="50%" align="center" bordercolor="#7fffd4" cellspacing="0">
				<tr align="center" height="60px">
					<td colspan="5"><h1>用&nbsp;&nbsp;&nbsp;&nbsp; 户&nbsp;&nbsp;&nbsp;&nbsp; 列&nbsp;&nbsp;&nbsp;&nbsp;
						表</h1></td>
				</tr>
				
				<tr>
					<th>编 号</th>
					<th>名 称</th>
					<th>年 龄</th>
					<th>性 别</th>
					<th>操 作</th>
				</tr>
				
				<!-- 4.遍历数据实现表格数据获取 -->
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button @click="toUpdate(user)">修改</button>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<button @click="deleteUserById(user.id)">删除</button>
					</td>
				</tr>
			
			</table>
		</div>
		
		<script src="../js资源/vue.js"></script>
		<script src="../js资源/axios.js"></script>
		<script>

            //优化请求路径
            axios.defaults.baseURL = "http://localhost:8090"

            const app = new Vue({
                el: '#app',
                data: {
                    userList: [],
                    addUser: {
                        name: '',
                        age: '',
                        sex: ''
                    },
                    updateUser: {
                        id: '',
                        name: '',
                        age: '',
                        sex: ''
                    },
                    selectUser:{
                        id: null,
                        name: null,
                        age: null,
                        sex: null
                    }
                },
                methods: {
                    //2. 定义获取远程数据的ajax请求
                    async getUserList() {
                        let {data: result} = await axios.get("/findAll")
                        this.userList = result
                        // .then(result => {
                        //     //服务器返回的是JSON串,经过JS程序解析变为JS对象
                        //     //3.实现数据赋值
                        //     this.userList = result.data
                        // })
                    },
                    async deleteUserById(id) {
                        //常规写法
                        //axios.delete("http://localhost:8090/user/"+id)
                        //模版字符串写法
                        let {data: result} = await axios.delete(`/user/${id}`)
                        console.log(result)
	                    alert(result)
                        this.getUserList()
                        // .then(result => {
                        //     console.log(result.data)
                        //     //刷新页面
                        //     this.getUserList()
                        // })
                    },
                    async addUserBtn() {
                        let {data: result} = await axios.post("/saveUser", this.addUser)
                        console.log(result)
                        alert(result)
                        //如果新增成功,则刷新列表页面
                        this.getUserList()
                        //新增成功之后，清空输入框数据
                        this.addUser = {}
                    },
                    toUpdate(user) {
                        this.updateUser = user
                    },
                    async updateUserBtn() {
                        let {data: result} = await axios.put("/updateUser", this.updateUser)
                        console.log(result)
                        alert(result)
                        this.getUserList()
                        this.updateUser = {}
                    },
                    async selectUserBtn(){
                        let {data:result} =  await axios.get("/select",{
                            params:this.selectUser
                        })
                        console.log(result)
                        alert("您查询到的数据为"+result)
	                    this.selectUser = {}
                    }
                },
                created() {
                    //1. 触发函数调用
                    this.getUserList()
                }
            })
		</script>
		
	</body>
</html>
